<link rel='import' href='../../bower/polymer/polymer.html'>
<link rel="import" href="../../bower/paper-button/paper-button.html">
<link rel='import' href='../../bower/paper-item/paper-item.html'>
<link rel="import" href="../../bower/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="../../bower/paper-dropdown/paper-dropdown.html">
<link rel="import" href="../../bower/core-menu/core-menu.html">
<link rel='import' href='button.html'>
<link rel='import' href='faq-link.html'>

<polymer-element name='uproxy-splash' attributes=''>
  <template>
    <style>
    :host {
      display: block;
      box-sizing: border-box;
      height: 100%;
      width: 100%;
      text-align: center;
      font-size: 1.1em;
      right: -100%;
      right: 0px;
      line-height: 24px;
    }
    h1 {
      font-size: 1.4em;
      color: #12A391;  /* dark green */
      margin-bottom: 1.5em;
    }
    h1.uproxyTitle {
      font-family: "Quicksand", sans-serif;
      font-weight: 700;
      font-size: 40px;
      letter-spacing: -1px;
      margin-bottom: 1em;
    }
    h1.uproxyTitle .first-u {
      color: #10c9b1;
    }
    #proxy-pic {
      opacity: 0.3;
    }
    .view {
      width: 80%;
      padding-left: 10%;
      padding-right: 10%;
      padding-top: 50px;
      opacity: 1;
      z-index: 10;
      overflow: auto;
    }
    .view > p {
      line-height: 20px;
    }
    .view[hidden] {
      display: block !important;
      opacity: 0;
      z-index: -1;
    }
    #nextWrapper uproxy-button {
      width: 150px;
    }
    #nextWrapper {
      margin-top: 1em;
    }
    uproxy-faq-link paper-button {
      width: 100%;
      padding-top: .3em;
      padding-bottom: .3em;
      border-top: 1px solid rgb(221, 221, 221);
      margin: 0;
    }
    #logo {
      margin-bottom: 1em;
      width: 114px !important;
      height: 114px !important;
    }
    .prevArrow {
      position: absolute;
      top: 8px;
      cursor: pointer;
      z-index: 11; /* Must be greater than z-index of .view */
      margin-left: 8px;
      margin-right: 8px;
    }
    #intro1, #metricsOptIn {
      height: 100%;
    }
    #metricsOptIn {
      text-align: start;
    }
    #metricsButtons {
      text-align: center;
    }
    #metricsButtons uproxy-button {
      padding: 0px 10px;
      margin: 1em;
    }
    #languageLink paper-dropdown-menu {
      border-bottom: 0px;
      font-size: 13px;
      margin-top: 1.5em;
    }
    #languageLink core-icon {
      height: 18px !important;
      width: 18px !important;
    }
    #languageLink paper-item {
      font-size: 13px;
    }
    #languageLink paper-item::shadow .button-content {
      padding: 0;
    }

    </style>
    <core-signals on-core-signal-open-splash='{{ open }}'></core-signals>
    <uproxy-state id="state"></uproxy-state>

    <div horizontal layout>
      <core-icon icon='arrow-back' on-tap='{{backToIntro}}' class='prevArrow'
          hidden?='{{SPLASH_STATES.INTRO==state}}'></core-icon>
    </div>

    <div vertical layout id='intro1' hidden?='{{SPLASH_STATES.INTRO!==state}}'>
      <div class='view' flex>
        <core-icon id='logo' icon="uproxy-logo:logo"></core-icon>
        <h1 class='uproxyTitle'><span class='first-u'>u</span>Proxy</h1>
        <p>
          {{ "ABOUT_UPROXY" | $$(model.globalSettings.language) }}
        </p>

        <div id='languageLink'>
          <core-icon icon='language'></core-icon>
          <paper-dropdown-menu label='{{ "LANGUAGE" | $$(model.globalSettings.language) }}'>
            <paper-dropdown class="dropdown" valign="bottom">
                <core-menu selected="{{ langIndex }}" class="menu" on-core-select='{{ updateLanguage }}'>
                    <template repeat='{{ l in languages }}'>
                      <paper-item languageCode='{{ l.languageCode }}'>
                        <bdi>{{ l.language }}</bdi>
                      </paper-item>
                    </template>
                </core-menu>
            </paper-dropdown>
          </paper-dropdown-menu>
        </div> <!-- end of #languageLink -->

        <div id='nextWrapper'>
          <uproxy-button raised on-tap='{{goToStats}}'>{{ "NEXT" | $$(model.globalSettings.language) }}</uproxy-button>
        </div>

      </div> <!-- end of .view -->

      <uproxy-faq-link anchor='whatIsUproxy'>
        <paper-button>
          {{ "LEARN_MORE_UPROXY" | $$(model.globalSettings.language) }}
        </paper-button>
      </uproxy-faq-link>

    </div> <!-- end of #intro1 -->

    <div vertical layout id="metricsOptIn" hidden?='{{SPLASH_STATES.METRICS_OPT_IN!==state}}'>
      <div class="view" flex>
        <h1>{{ "WELCOME" | $$(model.globalSettings.language) }}</h1>
        <p>
          {{ "BETA_MESSAGE" | $$(model.globalSettings.language) }}<br><br>
          {{ "CHANGE_STATS_CHOICE" | $$(model.globalSettings.language) }}
        </p>
        <p><b>{{ "ENABLE_METRICS" | $$(model.globalSettings.language) }}</b></p>
        <div id="metricsButtons">
          <uproxy-button id='enableStatsButton' on-tap='{{ enableStats }}'>{{ "IM_IN" | $$(model.globalSettings.language) }}</uproxy-button>
          <uproxy-button id='disableStatsButton' on-tap='{{ disableStats }}'>{{ "NO_THANKS" | $$(model.globalSettings.language) }}</uproxy-button>
        </div>
      </div>
      <uproxy-faq-link anchor='doesUproxyLogData'>
        <paper-button>
          {{ "MORE_ABOUT_METRICS" | $$(model.globalSettings.language) }}
        </paper-button>
      </uproxy-faq-link>
    </div>

  </template>
  <script src='splash.js'></script>
</polymer-element>
